<template>
    <div class="main">
        <banner></banner>
        <div class="pd20">
            <div class="h1">填写手机号</div>
            <div class="login-mobile">
                <div class="input-box">
                    <mt-field label="手机号" placeholder="请输入手机号" type="mobile" v-model="mobile"></mt-field>
                    <mt-field label="验证码" v-model="captcha" placeholder="请输入验证码">
                        <img :src="captchaCode" @click="getCaptcha()">
                    </mt-field>
                </div>
                <div class="btn-box">
                    <mt-button type="primary" size="large" @click.native="sendSms()">确认手机号</mt-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import banner from '../components/banner.vue'
import { MessageBox } from 'mint-ui'
export default {
    name: 'index',
    data () {
        return {
            mobile:'',
            captcha:'',
            captchaCode:''
        }
    },

    mounted() {
        // this.logined()
        this.getCaptcha()
    },
    
    methods: {
        sendSms () {
            this.getHeaders()
            let ts = this
            let api = this.getApi('sendsms')
            let data = this.getFormData({mobile:this.mobile, captcha:this.captcha})
            this.$ajax({
                method: 'POST',
                url: api,
                data: data,
                headers: this.headers,
            }).then(function(res){
                if(res.data.code == 1){
                    ts.goUrl('login')
                }else{
                    MessageBox('提示', res.data.msg);
                }
            }).catch(function(error){
                console.log(error)
            })
        }
    },
    components: {banner}
}
</script>